<template>
  <header>
    <div class="title">
      <!-- <img src="~@img/header/head-title.png" alt="" srcset="" /> -->
    </div>
    <div class="nav">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="rgba(0,0,0,0)"
        text-color="#818598"
        active-text-color="#fff"
      >
        <el-menu-item index="cockpit">
          <img
            v-show="activeIndex == 'cockpit'"
            src="~@img/header/nav-01-select.png"
            alt=""
          />
          <img
            v-show="activeIndex != 'cockpit'"
            src="~@img/header/nav-01-normal.png"
            alt=""
          />
          <span :class="[activeIndex == 'cockpit' ? 'active' : '']">
            招商驾驶舱
          </span>
        </el-menu-item>
        <el-menu-item index="atlas" :disabled="false">
          <img
            v-show="activeIndex == 'atlas'"
            src="~@img/header/nav-02-select.png"
            alt=""
          />
          <img
            v-show="activeIndex != 'atlas'"
            src="~@img/header/nav-02-normal.png"
            alt=""
          />
          <span :class="[activeIndex == 'atlas' ? 'active' : '']">
            产业现状图谱
          </span>
        </el-menu-item>
        <el-menu-item index="radar" :disabled="false">
          <img
            v-show="activeIndex == 'radar'"
            src="~@img/header/nav-03-select.png"
            alt=""
          />
          <img
            v-show="activeIndex != 'radar'"
            src="~@img/header/nav-03-normal.png"
            alt=""
          />
          <span :class="[activeIndex == 'radar' ? 'active' : '']">
            招商雷达
          </span>
        </el-menu-item>
        <el-menu-item index="map" :disabled="false">
          <img
            v-show="activeIndex == 'map'"
            src="~@img/header/nav-04-select.png"
            alt=""
          />
          <img
            v-show="activeIndex != 'map'"
            src="~@img/header/nav-04-normal.png"
            alt=""
          />
          <span :class="[activeIndex == 'map' ? 'active' : '']"
            >产业招商地图</span
          >
        </el-menu-item>
        <el-menu-item index="resources" :disabled="false">
          <img
            v-show="activeIndex == 'resources'"
            src="~@img/header/nav-05-select.png"
            alt=""
          />
          <img
            v-show="activeIndex != 'resources'"
            src="~@img/header/nav-05-normal.png"
            alt=""
          />
          <span :class="[activeIndex == 'resources' ? 'active' : '']">
            载体资源库
          </span>
        </el-menu-item>
        <el-menu-item index="portrait" :disabled="false">
          <img
            v-show="activeIndex == 'portrait'"
            src="~@img/header/nav-06-select.png"
            alt=""
          />
          <img
            v-show="activeIndex != 'portrait'"
            src="~@img/header/nav-06-normal.png"
            alt=""
          />
          <span :class="[activeIndex == 'portrait' ? 'active' : '']">
            360企业画像
          </span>
        </el-menu-item>
        
        <!-- <el-menu-item index="projectgl" :disabled="false">
          <img
            v-show="activeIndex == 'projectgl'"
            src="~@img/header/nav-07-select.png"
            alt=""
          />
          <img
            v-show="activeIndex != 'projectgl'"
            src="~@img/header/nav-07-normal.png"
            alt=""
          />
          <span :class="[activeIndex == 'projectgl' ? 'active' : '']">
            项目化二期
          </span>
        </el-menu-item> -->
        <el-menu-item
          index="projectmanage"
          :disabled="false"
          v-if="$store.state.isShowProject"
        >
          <img
            v-show="activeIndex == 'projectmanage'"
            src="~@img/header/nav-07-select.png"
            alt=""
          />
          <img
            v-show="activeIndex != 'projectmanage'"
            src="~@img/header/nav-07-normal.png"
            alt=""
          />
          <span :class="[activeIndex == 'projectmanage' ? 'active' : '']">
            项目化管理
          </span>
        </el-menu-item>
        <!-- <el-menu-item index="taixin" :disabled="false" class="el-taixin">
          <img
            v-show="activeIndex == 'taixin'"
            src="~@img/header/nav-08-select.png"
            alt=""
          />
          <img
            v-show="activeIndex != 'taixin'"
            src="~@img/header/nav-08-normal.png"
            alt=""
          />
          <span>太忻一体化</span>
          <br />
          <span class="dy">经济区(太原区)</span>
        </el-menu-item> -->
      </el-menu>
    </div>
    <div class="user">
      <div class="time">
        <img src="~@img/header/icon-date.png" alt="" />{{ nowTime }}
      </div>
      <div class="users">
        <div class="left" @click="goProject">
          <!-- <el-badge :value="''" class="item">
            <img src="~@img/header/notice.png" alt="" />
          </el-badge> -->
          <Tidings />
          <!-- <el-popover
            popper-class="tips"
            placement="bottom-start"
            width="320"
            trigger="click"
          >
            <div class="nr">
              <div class="pop_head">
                <span
                  @click="popover_type = 'db'"
                  :class="[popover_type == 'db' ? 'active' : '']"
                  >调度督办</span
                >
                <span
                  @click="popover_type = 'xt'"
                  :class="[popover_type == 'xt' ? 'active' : '']"
                  >系统通知</span
                >
              </div>
              <ul class="pop_main" v-if="popover_type == 'db'">
                <li v-for="item in 4" :key="item">
                  <div class="img">
                    <img
                      v-if="item % 2 == 1"
                      src="~@/assets/img/public/icon-news-yidu.png"
                      alt=""
                    />
                    <img
                      v-if="item % 2 == 0"
                      src="~@/assets/img/public/icon-news-weidu.png"
                      alt=""
                    />
                  </div>
                  <div class="flex-c">
                    <p class="p-title">调度提醒 来自 李四</p>
                    <p class="p-content">
                      要及时更新了2022年5月阳光电源项目的进
                      展，争取每周更新一次。
                    </p>
                    <p class="p-time">2022-08-09 14：26</p>
                  </div>
                </li>
              </ul>
              <ul class="pop_main" v-if="popover_type == 'xt'">
                <li v-for="item in 4" :key="item">
                  <div class="img">
                    <img
                      v-if="item % 2 == 1"
                      src="~@/assets/img/public/icon-news-yidu.png"
                      alt=""
                    />
                    <img
                      v-if="item % 2 == 0"
                      src="~@/assets/img/public/icon-news-weidu.png"
                      alt=""
                    />
                  </div>
                  <div class="flex-c">
                    <p class="p-title">系统消息</p>
                    <p class="p-content">
                      《隆基光伏产业基地项目》已超过1周没有进
                      行更新，请及时更新项目进展；如无请忽略
                    </p>
                    <p class="p-time">2022-08-09 14：26</p>
                  </div>
                </li>
              </ul>
              <div class="pop_bottom">
                <div>
                  <img src="~@/assets/img/public/icon-select.png" alt="" />
                  <span>标记全部为已读</span>
                </div>
                <div>
                  <img src="~@/assets/img/public/icon-history.png" alt="" />
                  <span>历史消息</span>
                </div>
              </div>
            </div>
            <div slot="reference">
              <el-badge :value="''" class="item">
                <img src="~@img/header/notice.png" alt="" />
              </el-badge>
            </div>
          </el-popover> -->
        </div>
        <div @click="goUserCenter">
          <img src="~@img/header/icon-user.png" alt="" />用户中心
        </div>
        <div @click="goLogin">
          <img src="~@img/header/icon-out.png" alt="" />退出登录
        </div>
      </div>
    </div>
  </header>
</template>

<script>
import Tidings from "./tidings.vue";
import { login_out } from "@api/login";
export default {
  data() {
    return {
      activeIndex: "cockpit",
      nowTime: null,
      popover_type: "db",
      noAccessRouter: [],
    };
  },
  components: {
    Tidings,
  },
  created(){
    console.log('header组件',this.$store.state.isShowProject)
  },
  mounted() {
    this.noAccessRouter = localStorage.getItem("noAccessRouter");
    setInterval(() => {
      this.getNowTime();
    }, 1000);
    this.activeIndex = this.$route.name;
    this.$bus.$on("setActive", (activeMenu) => {
      this.activeIndex = activeMenu;
    });
  },
  methods: {
    handleSelect(key) {
      this.activeIndex = key;
      if (this.$route.name !== key) {
        this.$router.push({ name: key });
      }
    },
    goLogin() {
      this.$message({
        message: "已退出登录",
        type: "success",
      });
      let token = localStorage.getItem("login");
      this.loginOut(token);

      // localStorage.setItem("login", "");
      // sessionStorage.setItem("isPop", "");
      // sessionStorage.setItem("district_name", "");
      // localStorage.setItem("org_id", "");

      sessionStorage.clear()
      localStorage.clear()
      window.sessionStorage.clear()
      window.localStorage.clear()
      this.$store.commit("setFlag", 0);
      this.$store.commit("setRoleId", 0);
      this.$router.replace({ path: "/login" });
    },
    async loginOut(token) {
      let res = await login_out({ token });
      console.log(res);
    },
    goUserCenter() {
      if (this.$route.name !== "yhhuvhxs") {
        this.activeIndex = "yhhuvhxs";
        this.$router.push({ name: "yhhuvhxs" });
      }
    },
    getNowTime() {
      this.nowTime = this.$moment().format("YYYY/MM/DD  dddd  HH:mm:ss");
    },
    goProject() {
      // this.$router.push({ name: "myproject" });
    },
  },
};
</script>
<style lang="less" scoped>
.dy {
  position: absolute;
  left: 0;
  top: 105px;
}
/deep/ .el-menu--horizontal > .el-menu-item.el-taixin {
  line-height: 52px;
}
header {
  position: relative;
  height: 120px;
  background-color: #020929;
  color: #fefefe;
  overflow: hidden;
  .nav,
  .ul {
    // margin-left: 140px;
    display: inline-block;
    height: 120px;
    li {
      width: 120px;
      height: 120px;
      // margin-right: 14px;
      font-size: 16px;
      padding: 0;
      text-align: center;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        top: 36px;
        right: 0;
        width: 1px;
        height: 40px;
        background: #ffffff;
        opacity: 0.4;
      }
      &:last-of-type:after {
        content: "";
        position: absolute;
        top: 36px;
        right: 0;
        width: 1px;
        height: 40px;
        background: transparent;
        opacity: 0.4;
      }
      &:hover {
        background-color: transparent;
      }
      img {
        width: 90px;
        height: 90px;
      }
      // img {
      //   margin-top: 15px;
      //   margin-bottom: -13px;
      // }
    }
    span {
      margin-top: -25px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
      opacity: 0.5;
    }
    img {
      display: block;
      margin: 0px auto -30px;
    }
    span,
    img {
      -moz-user-select: none;
      -o-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  }
}
.title {
  position: absolute;
  left: 0;
  top: 0;
  width: 530px;
  height: 120px;
  // float: left;
  cursor: pointer;
  background: url("~@img/header/head-title.png") no-repeat left center;
  background-size: 100% auto;
  // img {
  //   width: 570px;
  // }
}
.user {
  position: absolute;
  right: 30px;
  top: 0;
  width: 320px;
  // float: right;
  // margin-right: 30px;
  margin-top: 20px;
  color: #fff;
  display: flex;
  flex-direction: column;
  .time {
    padding: 0 15px;
    font-size: 18px;
    font-family: Myriad Pro;
    font-weight: 400;
    color: #ffffff;
    line-height: 24px;
    opacity: 0.5;
    cursor: pointer;
    margin-bottom: 12px;
    img {
      margin-right: 20px;
    }
  }
  .users {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    line-height: 48px;
    background: rgba(39, 110, 156, 0.36);
    border: 1px solid #080102;
    box-shadow: 0px 0px 4px 0px rgba(0, 132, 255, 0.8),
      0px 0px 16px 0px rgba(0, 156, 255, 0.31);
    border-radius: 10px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    line-height: 24px;
    img {
      margin-right: 10px;
    }
    div.left {
      flex: 0 0 60px;
      img {
        width: 42px;
        height: 46px;
        margin: 0 auto;
      }
    }
    div {
      position: relative;
      flex: 1;
      height: 46px;
      line-height: 46px;
      text-align: center;
      cursor: pointer;
      &::after {
        content: "";
        position: absolute;
        top: 13px;
        right: 0;
        width: 1px;
        height: 20px;
        background: #ffffff;
        opacity: 0.4;
      }
      &:last-of-type::after {
        content: none;
      }
    }
  }
}
.nav {
  margin: 0 auto;
  margin-left: 80px;
}
//导航栏去除下划线
.el-menu--horizontal > .el-menu-item {
  border-bottom: none;
}
/deep/ .nav .el-menu--horizontal > .el-menu-item {
  background-color: transparent !important;
  border-bottom: none;
}
/deep/ .nav .el-menu--horizontal > .el-menu-item {
  color: #75798e !important;
  border-bottom-color: transparent !important;
  background-color: transparent !important;
  border-bottom: none;
  span.active {
    color: #fff;
    opacity: 1;
  }
  // img {
  //   margin:0px auto -30px ;
  // }
}
.el-menu.el-menu--horizontal {
  background-color: transparent !important;
  border: none;
  height: 120px;
}
//
.el-menu-item.is-disabled {
  opacity: 1;
  cursor: not-allowed;
  background: transparent;
}

/deep/ .el-badge__content {
  padding: 0;
  border: 0;
  min-width: 22px;
  height: 22px;
  line-height: 22px;
  background: #c72622;
  border-radius: 50%;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
}
/deep/ .el-badge__content.is-fixed {
  top: 12px;
  right: 18px;
}

/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  header .title {
    width: 460px;
  }
  header .nav {
    margin-left: 100px;
  }
  header .nav li {
    width: 100px;
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  header .title {
    width: 420px;
  }
  header .nav {
    margin-left: 40px;
  }
  header .nav li {
    width: 90px;
  }
  header .nav span,
  header .ul span {
    font-size: 14px;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  header .title {
    width: 380px;
  }
  header .nav {
    margin-left: 20px;
  }
  header .nav li {
    width: 90px;
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  header .title {
    width: 360px;
  }
  header .nav {
    margin-left: 20px;
  }
  header .nav li {
    width: 90px;
  }
  .el-menu.el-menu--horizontal[data-v-29e8c3c6] {
    transform: scale(0.88);
    -moz-transform: scale(0.88);
    -webkit-transform: scale(0.88);
    -o-transform: scale(0.88);
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  header .title {
    width: 300px;
  }
  header .nav {
    margin-left: 20px;
  }
  header .nav li {
    width: 90px;
  }
  header .nav li img,
  header .ul li img {
    width: 80px;
    height: 80px;
  }
  header .nav span,
  header .ul span {
    font-size: 12px;
  }
  .user {
    right: 10px;
    width: 240px;
  }
  .user .time {
    font-size: 12px;
  }
  .user .users {
    font-size: 12px;
    img {
      vertical-align: middle;
    }
    .left img {
      vertical-align: top;
    }
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  header .title {
    width: 270px;
  }
  header .nav {
    margin-left: 0;
  }
  header .nav li {
    width: 74px;
  }
  header .nav li img,
  header .ul li img {
    margin-top: 16px;
    width: 70px;
    height: 70px;
  }
  .user {
    right: 10px;
    width: 232px;
  }
}
</style>
<style>
.el-popover.tips {
  padding: 0;
}
</style>
